<template>
  <div class="gateway_main">
    <con-title :topTitle="topTitle" />

    <el-tabs
      type="border-card"
      class="tabs"
      activeName="all"
      @tab-click="tabClick"
    >
      <el-tab-pane label="所有设备" name="all">
        <!-- form end -->
      </el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN">
        <!-- LoRaWAN -->
      </el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP">
        <!-- LoRaPP -->
      </el-tab-pane>
      <div class="form_con">
        <el-form label-width="80px">
          <el-form-item label="在线状态">
            <el-select
              v-model="gateway.online"
              style="width: 100%"
              placeholder="请选择在线状态"
            >
              <el-option label="全部" style="font-size: 18px" value="全部">
              </el-option>
              <el-option label="在线" value="在线"></el-option>
              <el-option label="离线" value="离线"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="EUI">
            <el-input placeholder="设备EUI" v-model="gateway.eui"></el-input>
          </el-form-item>
          <el-form-item label="绑定时间">
            <el-date-picker
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="gateway.date"
              range-separator="至"
              :default-time="['12:00:00']"
            >
            </el-date-picker>
          </el-form-item>
          <el-button-group>
            <el-button type="primary" @click="gatewayList" icon="el-icon-search"
              >搜索</el-button
            >
            <el-button type="primary" icon="el-icon-delete" @click="resetForm"
              >清除条件</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="gatewayList(1)"
              >刷新</el-button
            >
          </el-button-group>
          <span class="gray"> 搜索结果: {{ gateData.total }}</span>
        </el-form>
      </div>
    </el-tabs>

    <el-table class="table" :data="gateData.data" style="width: 100%">
      <el-table-column prop="index" width="50"> </el-table-column>
      <el-table-column prop="eui" label="EUI" width="180"> </el-table-column>
      <el-table-column prop="name" label="设备名称" width="180">
      </el-table-column>
      <el-table-column prop="mhz" label="频率(MHz)"> </el-table-column>
      <el-table-column prop="online" label="在线状态">
        <template slot-scope="scope">
          {{ scope.row.online | onlineType }}
        </template>
      </el-table-column>
      <el-table-column prop="country" label="国家"> </el-table-column>
      <el-table-column prop="agreement" label="组网协议类型"> </el-table-column>
      <el-table-column prop="bTime" label="绑定时间">
        <template slot-scope="scope">
          {{ scope.row.bTime | Time }}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination_center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="currentChange"
        :page-sizes="[5, 10, 15]"
        :current-page="gateway.currPage"
        :page-size="gateway.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="gateData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $gatewayList } from "@/api/api.js";

export default {
  name: "gateway",
  components: {
    ConTitle,
  },
  filters: {
    onlineType(val) {
      return val ? "在线" : "离线";
    },
    Time(val) {
      let date = new Date(val);
      let year = date.getFullYear();
      let month = fillZero(date.getMonth() + 1);
      let day = fillZero(date.getDate());
      let h = fillZero(date.getHours());
      let m = fillZero(date.getMinutes());
      let s = fillZero(date.getSeconds());
      function fillZero(v) {
        return v < 10 ? "0" + v : v;
      }
      return `${year}-${month}-${day} ${h}:${m}:${s}`;
    },
  },
  data() {
    return {
      topTitle: {
        type: "设备",
        text: "网关列表",
        msg: "显示EUI、名称、状态等设备信息、可根据EUI、状态、和绑定时间等条件筛选具体的网关",
      },
      gateData: {}, //接收网关数据
      gateway: {
        online: "全部",
        eui: "",
        currPage: 1,
        pageSize: 5,
        agreement: "",
        date: "",
      },
      oldRequsetData: {
        online: "全部",
        eui: "",
        currPage: 1,
        agreement: "",
        pageSize: 5,
        date: "",
      },
    };
  },
  created() {
    //获取网关列表数据
    this.gatewayList();
  },
  methods: {
    tabClick(ev) {
      //选项卡切换事件
      this.gateway.agreement = ev.name;
      // if(ev.index == 0){
      //   this.gateway.agreement="";
      // }else if(ev.index == 1){
      //   this.gateway.agreement="LoRaWAN";
      // }else if(ev.index == 2){
      //   this.gateway.agreement="LoRaPP";
      // }
      this.gatewayList();
    },

    handleSizeChange(index) {
      //修改分页的每页显示条数
      this.gateway.pageSize = index;
      this.currPage = 1;
      this.gatewayList();
    },

    //获取数据
    gatewayList(_data) {
      //先过滤数据
      let data = {};
      if (_data != 1) {
        data = JSON.parse(JSON.stringify(this.gateway));
      } else {
        data = JSON.parse(JSON.stringify(this.oldRequsetData));
      }
      this.oldRequsetData = JSON.parse(JSON.stringify(data)); //拷贝
      data.online =
        data.online == "全部" ? "" : data.online == "在线" ? true : false;
      if (data.date && data.date.length == 2) {
        data.date =
          new Date(data.date[0]).getTime() +
          "-" +
          new Date(data.date[1]).getTime();
      }
      $gatewayList(data).then((res) => {
        console.log("数据：", res);
        res.data.data = res.data.data.map((value, index) => {
          value.index =
            index + 1 + (this.gateway.currPage - 1) * this.gateway.pageSize;
          return value;
        });
        this.gateData = res.data;
      });
    },

    currentChange(index) {
      this.gateway.currPage = index;
      this.gatewayList();
    },

    // 清空表单
    resetForm() {
      this.gateway = {
        online: "全部",
        eui: "",
        agreement: "",
        currPage: this.gateway.currPage,
        pageSize: this.gateway.pageSize,
        date: "",
      };
    },
  },
};
</script>

<style scoped lang="scss">
.gateway_main::-webkit-scrollbar {
  display: none;
}
.gateway_main {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .table {
    margin-top: 10px;
  }

  .form_con {
    width: 400px;
    .gray {
      color: gray;
      font-size: 14px;
    }
  }
  .tabs {
    margin-top: 10px;
  }
  .pagination_center {
    text-align: center;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
  }
}
</style>